<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    props: {},
    computed: {},
    data() {
        return {
            // 外部传入
            apiConfig:null,
            // 外部传入
            appWindow: null,
            loading: true,
            // 外部传入
            appWindow: null,
            // 上传方式
            type: 1,
            // 分组
            groupList: [],
            albumId: "",
            // 窗口显示
            boxVisible: false,
            fileList: [],
            // 上传扩展限制
            accept: "",
            // 大小限制
            maxSize: 140,
            maxSizeText: "",
        };
    },
    methods: {
        // 关闭窗口
        editBoxClose() {
            this.boxVisible = false;
        },
        // 取消
        editBoxCancel() {
            this.editBoxClose();
        },
        delRes(index_) {
            this.fileList.splice(index_, 1);
        },
        async getFile(event) {
            var file = event.target.files;

            for (var i = 0; i < file.length; i++) {
                this.$vFN.Tools.setLoad(true);
                let _d = await this.getFileInfo(file[i]);

                if (_d.size <= this.maxSize) {
                    this.fileList.push(_d);
                } else {
                    this.$vFN.Tools.messageError(
                        "上传内容大小不可超过" + this.maxSizeText
                    );
                }
                this.$vFN.Tools.setLoad(false);
            }
        },
        // 获取文件信息
        async getFileInfo(file_) {
            // 获取文件类型
            let _type = file_.type.split("/")[0];
            // 扩展名
            let _imgName = file_.name;
            let _idx = _imgName.lastIndexOf(".");
            let _ext = null;
            let _name = _imgName.substring(0, _idx);
            // 如果存在
            if (_idx != -1) {
                // 解析扩展名 并转大写
                _ext = _imgName.substr(_idx + 1).toUpperCase();
                // 转小写
                _ext = _ext.toLowerCase();
            }
            let _data = await this.getImgInfo(file_);

            _data.ext = _ext;
            _data.file = file_;
            _data.type = _type;
            _data.name = _name;
            _data.isLoad = false;

            return _data;
        },
        // 获取图片信息
        getImgInfo(file_) {
            let that = this;

            return new Promise((resolve, reject) => {
                let fileReader = new FileReader();
                fileReader.readAsDataURL(file_); //根据图片路径读取图片

                fileReader.onload = function (e) {
                    let img = new Image();
                    img.src = fileReader.result;
                    img.onload = function () {
                        resolve({
                            size: parseFloat(file_.size / 1024).toFixed(2),
                            width: img.naturalWidth,
                            height: img.naturalHeight,
                            url: fileReader.result,
                        });
                    };
                };
            });
        },

        // 图片上传
        submit() {
            let _isOk = 0;
            this.loading = true;
            this.fileList.forEach(async (item) => {
                let _data = await this.$vFN.Http.post(
                    {
                        url: this.apiConfig.createSubmit.url,
                        domain: this.apiConfig.createSubmit.domain,
                        data: {
                            file: item.url,
                            albumId: this.albumId,
                            name: item.name,
                            albumWidth: item.width,
                            albumHeight: item.height,
                            type: this.type,
                        },
                    },
                    this.appWindow
                );
                if (_data._ok) {
                    _isOk += 1;
                }
                console.log(this.fileList.length, _isOk);
                if (this.fileList.length == _isOk) {
                    this.loading = false;
                    this.editBoxClose();
                    this.onSuccess();
                    this.$vFN.Tools.messageSuccess("上传成功");
                }
            });
        },

        // 获取内容信息
        async getGroup() {
           
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.albumList.url,
                    domain: this.apiConfig.albumList.domain,
                    data: {
                        type: this.type,
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                this.groupList = _data.data;
            }
        },
        // 获取配置信息
        async getData() {
           
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.fileConfig.url,
                    domain: this.apiConfig.fileConfig.domain,
                },
                this.appWindow
            );
            if (_data._ok) {
                // 上传格式
                let _list = _data.data.imgSuffixLst;
                let _arr = [];
                _list.forEach((item) => {
                    _arr.push("." + item);
                });
                this.accept = _arr.join(",");

                // 上传大小
                let _maxSize = _data.data.imgSize;
                let _text = _maxSize + "KB";
                if (_maxSize > 1024) {
                    _text = parseFloat(_maxSize / 1024).toFixed(2) + "MB";
                }
                this.maxSizeText = _text;
                this.maxSize = _maxSize;
            }
        },
        async init() {
            this.loading = true;
            this.boxVisible = true;
            await this.getData();
            await this.getGroup();
            this.loading = false;
        },

        // 成功回调
        onSuccess() {},
        // 取消回调
        onCancel() {},
        // 失败回调
        onError() {},
    },
    watch: {},
    mounted() {
        this.init();
    },
    beforeCreate() {},
};
</script>